<template>
  <el-card class="filter-container" shadow="never">
    <div>
      <i class="el-icon-menu"></i>
      <span>品牌列表</span>
    </div>
  <div>
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-tickets"></i>
        <span>品牌推荐列表</span>
      </div>
    <div style="margin: 10px">
      <el-input style="width:200px" suffix-icon="el-icon-search" placeholder="品牌名称" v-model="brandName"></el-input>
      <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
    </div>

    <div style="margin: 10px">
      <el-button type="primary" @click="handleSelectBrand()">选择品牌<i class="el-icon-circle-plus-outline"></i></el-button>

      <el-popconfirm
          class="ml-5"
          confirm-button-text='确定'
          cancel-button-text='我再想想'
          icon="el-icon-info"
          icon-color="red"
          title="您确定批量删除这些数据吗？"
          @confirm="delBatch"
      >
         <el-button type="danger" slot="reference">批量删除<i class="el-icon-remove-outline"></i></el-button>
      </el-popconfirm>
    </div>

    <el-table :data="tableData" @selection-change="handleSelectionChange" border>
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="编号" width="60" align="center">
      </el-table-column>
      <el-table-column prop="brandName" label="商品品牌名称" width="120" align="center">
      </el-table-column>
      <el-table-column prop="recommendStatus" label="推荐状态" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.recommendStatus==0" >
            <div class="status-icon icon1"></div>未推荐
          </span>
          <span v-if="scope.row.recommendStatus==1">
            <div class="status-icon icon1"></div>推荐中
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" align="center">
      </el-table-column>
      <el-table-column label="是否推荐" prop="recommendStatus"  width="80">
        <template slot-scope="scope">
          <el-switch
              v-model="scope.row.recommendStatus"
              :active-value="1"
              :inactive-value="0"
              @change="changeSwitch(scope.row.id)"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="success" @click = "handleEdit(scope.row)">设置排序</el-button>
          <el-popconfirm
              class="ml-5"
              confirm-button-text='确定'
              cancel-button-text='我再想想'
              icon="el-icon-info"
              icon-color="red"
              title="您确定删除吗？"
              @confirm="handleDel(scope.row.id)"
          >
            <el-button type="danger" slot="reference">删除</el-button>
          </el-popconfirm>
        </template>>
      </el-table-column>
    </el-table>
    </el-card>

    <el-dialog title="选择品牌" :visible.sync="dialogVisible" width="70%">

      <el-table ref="productTable"
                :data="list"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                v-loading="listLoading"
                border>
        <el-table-column type="selection" width="60" align="center"></el-table-column>
        <el-table-column label="品牌名称" align="center">
          <template slot-scope="scope">
            <p>{{scope.row.name}}</p>
          </template>
        </el-table-column>
        <el-table-column label="相关" align="center">
          <template slot-scope="scope">
            商品: <span class="color">{{scope.row.productCount}}</span>
            评价: <span class="color">{{scope.row.productCommentCount}}</span>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination-container">
        <el-pagination
            background
            @size-change="handleSizeChange1"
            @current-change="handleCurrentChange1"
            layout="total,sizes,prev, pager, next,jumper"
            :page-size="listQuery.pageSize"
            :page-sizes="[5,10,15]"
            :current-page.sync="listQuery.pageNum"
            :total="total1">
        </el-pagination>
      </div>
      <el-button class="r" type="primary" @click="addBatch">确定</el-button>
    </el-dialog>

    <div style="padding: 10px 0">
      <el-pagination
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>

    <el-dialog title="品牌排序" :visible.sync="dialogFormVisible" width="30%">
      <el-form label-width="80px" size="small">
        <el-form-item label="排序">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button class="r" type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
  </el-card>
</template>

<script>
import {fetchList} from "@/api/brand";
const defaultListQuery = {
  keyword: null,
  pageNum: 1,
  pageSize: 5,
  publishStatus: null,
  verifyStatus: null,
  productSn: null,
  productCategoryId: null,
  brandId: null
};
export default {
  name: "Brand",
  data(){
    return {
      listQuery: Object.assign({}, defaultListQuery),
      list: null,
      total:0,
      total1:0,
      pageNum:1,
      pageSize:10,
      tableData: [],
      brandName:"",
      dialogFormVisible:false,
      dialogVisible:false,
      listLoading: true,
      multipleSelection:[],
      form:{}
    }
  },
  created(){
    this.load()
    this.getList();
  },
  methods:{
    load(){
      //请求查询数据
      this.request.get("/recommendbrands/page",{
        params:{
          pageNum:this.pageNum,
          pageSize:this.pageSize,
          brandName:this.brandName
        }
      }).then(res =>{
        console.log(res)
        this.tableData = res.records
        this.total = res.total
      })
    },
    handleSizeChange(pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange(pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    },
    handleSizeChange1(val) {
      this.listQuery.pageNum = 1;
      this.listQuery.pageSize = val;
      this.getList();
    },
    handleCurrentChange1(val) {
      this.listQuery.pageNum = val;
      this.getList();
    },
    addBatch(){
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/recommendbrands/addlist",ids).then(res=>{
        if(res){
          this.$message.success("批量添加成功")
          this.dialogVisible=false
          this.load()
        }else{
          this.$message.error("批量添加失败")
          this.dialogVisible=false
          this.load()
        }
      })
    },
    handleAdd(){
      this.dialogFormVisible = true
      this.form = {}
    },
    save(){
      this.request.post("/recommendbrands",this.form).then(res=>{
        if(res){
          this.$message.success("保存成功")
          this.dialogFormVisible = false
          this.load()
        }else{
          this.$message.error("保存失败")
          this.dialogFormVisible = false
        }
      })
    },
    getList() {
      this.listLoading = true;
      fetchList(this.listQuery).then(response => {
        this.listLoading = false;
        this.list = response.data.list;
        this.total1 = response.data.total;
      });
    },
    handleEdit(row){
      this.form = row
      this.dialogFormVisible = true
      this.load()
    },
    handleDel(id){
      this.request.delete("/recommendbrands/"+id).then(res=>{
        if(res){
          this.$message.success("删除成功")
          this.load()
        }else{
          this.$message.error("删除失败")
        }
      })
    },
    handleSelectionChange(val){
      this.multipleSelection = val
    },
    handleSelectBrand(){
      this.dialogVisible=true
    },
    delBatch(){
      let ids = this.multipleSelection.map(v => v.id)
      this.request.post("/recommendbrands/del/batch",ids).then(res=>{
        if(res){
          this.$message.success("批量删除成功")
          this.load()
        }else{
          this.$message.error("批量删除失败")
          this.load()
        }
      })
    },
    reset() {
      this.brandName = ""
      this.load()
    },
    changeSwitch(id){
      this.request.put("/recommendbrands/"+id).then(res=>{
        if(res){
          this.$message.success("修改成功")
          this.load()
        }else{
          this.$message.error("修改失败")
        }
      })
    }
  }
}
</script>

<style scoped>
.r{
  position:absolute;
  right:5px;
  bottom:5px;
}

.color{
  color: #1E90FF;
}
</style>